<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>控制台</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet">
    <style>
        body {
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }
        a {
            text-decoration: none;
        }
        .el-menu-demo a {
            height: 60px;
            display: inline-block;
        }
        .img {
            width: 80px;
            height: 80px;
            float: left;
            margin-right: 1em;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu default-active="2" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><a href="/dash">管理中心</a></el-menu-item>
                <el-menu-item index="2">用户管理</el-menu-item>
                <el-menu-item index="9" style="float: right;">
                    <span style="font-size: 14px; line-height: 3em; margin-right: 1em" :title="user.id">{{ user.username }}</span>
                    <el-button size="small" type="danger" @click="logout">退出</el-button>
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <el-form :inline="true" size="small">
                <el-form-item label="用户">
                    <el-input v-model="username" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="mobile" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="list" style="width: 100%">
                <el-table-column label="头像" width="100">
                    <template slot-scope="scope">
                        <el-image class="img" :src="scope.row.avatar" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="账号" width="240"></el-table-column>
                <el-table-column prop="mobile" label="手机" width="240"></el-table-column>
                <el-table-column prop="name" label="姓名" width="240"></el-table-column>
                <el-table-column label="博客">
                    <template slot-scope="scope">
                        <el-link :href="scope.row.website" target="_blank" :disabled="!!scope.row.delete_time">{{ scope.row.website }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="login_time" label="最后登录时间" width="180"></el-table-column>
            </el-table>
            <el-pagination style="text-align: center" layout="prev, pager, next" page-size="5" @current-change="handleCurrentChange" :total="count"></el-pagination>
        </el-main>
    </el-container>
</div>
</body>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/store.js/2.0.12/store.legacy.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user: {
                    id: 0,
                    username: '',
                    token: ''
                },
                username: '',
                mobile: '',
                userId: '',
                page: 1,
                list: [],
                total: 0,
                count: 0,
                headers: {
                    token: ''
                },
                dialogFormVisible: false
            }
        },
        mounted() {
            this.user = store.get("user")
            this.headers.token = this.user.token
            this.getList()

            axios.get('/admin/news/users', {headers: this.headers}).then(res => res.data).then(res => {
                if (res.error) {
                    this.$alert(res.message)
                    return
                }

                this.options.users = res.data.list.map(item => { return { label: item.username, value: item.id } })
            });
        },
        methods: {
            getList() {
                let opt = [];
                if (this.username.length) {
                    opt.push(`username=${this.username}`);
                }
                if (this.mobile.length) {
                    opt.push(`mobile=${this.mobile}`);
                }

                const params = opt.length ? '&' + opt.join('&') : '';

                axios.get(`/admin/user/index?page=${this.page}&pageSize=5${params}`, {headers: this.headers}).then(res => res.data).then(res => {
                    if (res.error) {
                        this.$alert(res.message)
                        return
                    }

                    this.list = res.data.list
                    this.total = res.data.total
                    this.count = res.data.count
                })
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getList();
            },
            onSearch() {
                this.page = 1;
                this.getList();
            },
            logout() {
                axios.get(`/auth/logout`, {headers: this.headers}).then(res => res.data).then(res => {
                    store.remove("user")
                    window.location.href = '/login'
                })
            }
        }
    })
</script>
</html>